<template>
<!--
    知识点：
    1.element表单组建的使用().
    2.
 -->
    <div class="loginpage">
            <!-- <h2>我是login页面</h2> -->
        <div class="loginpage-form-wrap">
            <el-form class="loginpage-form" ref="loginform"  label-width="60px" :model="loginform">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginform.username" type="text" @keydown.enter.native="loginSubmit"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginform.password" type="password" @keydown.enter.native="loginSubmit"></el-input>
                </el-form-item>
                <!--
                    回车事件：

                    可以写成
                        @keydown.enter="xxx" 或者 @keydown.13="xxx"
                        v-on:keydown.enter="xxx" 或者 v-on:keydown.13="xxx"

                    注意事项：
                        1.由于这个标签是element框架的，写事件时记得在事件后面添加一个 .native，如果是原生的html标签则不需要。
                        2.参考我B站vue教程的v-on修饰符相关章节视频
                        3.keydown也可以换成keyup试试
                    
                    参考文章：
                    https://www.cnblogs.com/jinsuo/p/7537968.html
                    https://www.cnblogs.com/yhhBKY/p/13914592.html(原生dom的js写法)
                    https://blog.csdn.net/mygoes/article/details/105998096(element里要加native)
                -->
                    
                <el-form-item>
                    <el-button type="primary" round @click="loginSubmit" >登陆</el-button>
                    <el-button type="primary" round @click="cleanForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    data(){
        return{
            loginform:{
                username:'',
                password:''
            }
        }
    },
    methods:{
        loginSubmit(){
            /*
            todo
            1.elementui表单验证功能(参考我的码云里的elementui-demo项目)。
            2.使用axios调用后端登陆接口。
            3.从接口获取到的用户信息要存入vuex。
            */
           if(this.loginform.username === 'admin' && this.loginform.password === '123456'){
               this.$router.push({path:'/home'});
           }else{
               //使用element-ui里的Message组件
               this.$message({
                   message:'账号或者密码不正确！！！',
                   type:'error',
                   showClose:true,
                   offset:80
               });
           }
            
        },
        cleanForm(){
            /*
            注意：
            需要在el-form-item标签里加上prop属性，
            否则resetFields()方法会失效，
            不管是否使用elementui的表单校验功能！！！
            */

           this.$refs['loginform'].resetFields();
            
            /*
            也可以用这种方式清空表单
            this.loginform.username = '';
            this.loginform.password = '';
            */   
        }
    }
}
</script>
<style scoped>

/* 
登陆页面整体容器。
使用弹性布局让登陆框水平垂直居中。
最小宽度设置为登陆框相等的宽度，避免被浏览器横向压缩。
 */
.loginpage{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 300px;
}




/* el-form表单外部容器 */
.loginpage-form-wrap{
    border: steelblue 1px solid;
    width: 300px;
    padding: 15px;

    /* 设置背景为透明 */
    background-color: rgb(255,255,255,0.5);

    /* 设置边框圆角 */
    border-radius: 20px;
}


/* 
尝试修改element-ui的样式
注意：
    这里使用深度选择器，否则无法修改elementui组件样式
    详情请见我的网盘》》web前端》》前端自总结》》vue相关学习》》elementui相关知识》》自定义修改elementui样式
    关于vue里使用深度选择器的说明参考文章(重要！)：https://www.cnblogs.com/CyLee/p/10006065.html

ps: 也可以直接把element-ui的标签名称，当作类名用于css选择器
    eg：
    <el-button type="primary" round @click="loginSubmit" >登陆</el-button>
    
    .el-button+.el-button {
    margin-left: 45px;  设置两个按钮之间的间距
    }
    
pps：在f12界面里的Elements标签里，右侧上部有个:hov的按钮，
    点击后可以勾选查看各类伪类(比如hover、focus等)状态下element-ui的样式设置，
    从而参考修改为自己需要的样式。
 */
.loginpage-form>>>.el-input__inner{
    border:4px solid #DCDFE6; /*设置输入框 边框的宽度和颜色 */
    font-size: 17px; /* 设置输入框 里面的字体大小 */
}
.loginpage-form>>>.el-input__inner:hover{
    border-color: silver; /*设置输入框 鼠标hover时 边框的宽度和颜色 */
}
.loginpage-form>>>.el-input__inner:focus{
    border-color: #409EFF; /*设置输入框 光标聚焦focus时 边框的颜色 */
}
.loginpage-form>>>.el-form-item:last-child{
    margin-bottom: 0; /* 取消最后一个form-item的外下边距 */
}
.loginpage-form>>>.el-form-item__label{
    font-weight: 800; /*设置表单字体加粗*/
    color: rgba(31, 19, 59, 0.94); /* 设置表单字体颜色 */
}
.el-button+.el-button {
    margin-left: 45px; /* 设置两个按钮之间的间距，目的：美观 */
}
</style>